<template>
  <div class="main">
    <main class="content">
      <header class="header">{{ notice.article_title }}</header>
      <div class="time">
        <span>{{ notice.article_id }}</span
        ><span>{{ notice.article_time }}</span>
      </div>
      <div v-html="notice.article_content"></div>
    </main>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      notice: ""
    };
  },
  mounted() {
    let info = {
      article_id: this.$route.params.id
    };
    this.$ajax
      .get(this.$api.getArticleList, info)
      .then(res => {
        this.notice = res.data.list;
      })
      .catch(err => {
        this.$toast.failed(err);
      });
  }
};
</script>

<style scoped lang="stylus">
.main{
  background-color: white;
  height: 100%;
}
  .content{
    padding: 25px 24px;
  }
  .header{
    font-size 30px;
    color #333333;
    font-weight:400;
    line-height:43px;
    margin-bottom  25px;
  }
  .time{
    font-size:24px;
    line-height:43px;
    color #333333;
    margin-bottom 35px;
  }
  .time>span:first-child{
    color #317EB9;
    margin-right 10px;
  }
</style>
